<template>
	<view class="root">
		<view
			:style="{
				backgroundImage: `linear-gradient(0deg, #f8faff, #f45455)`,
				paddingBottom: `150rpx`,
			}"
			class="pl-20 pr-20 color-fff"
		>
			<view class="ai-center mt-24">
				<text class="fs-24 lh-3">可提赏金余额</text>
				<text class="fs-48 fw-700">￥{{ Number(balance).toFixed(2) }}</text>
			</view>

			<view class="fd-row fs-26 lh-3 mt-30 mb-30 text-center fw-700 ai-center">
				<navigator url="/pages/client/Subordinate" class="f1">我的下级</navigator>
				<label class="width-2 height-54 bgc-eee" />
				<navigator url="/pages/client/References" class="f1">我的推荐</navigator>
			</view>
		</view>

		<view :style="{ padding: `30rpx`, margin: `-150rpx 20rpx 0` }" class="bgc-fff br-20">
			<radio-group name="radio" @change="changeWithdrawalMethod">
				<label
					v-for="(method, key) in methods"
					:key="key"
					:style="{
						filter: method.disabled ? `grayscale(90%)` : `none`,
						padding: `20rpx`,
					}"
				>
					<image
						class="width-54 height-54"
						:src="`/static/img/icon-${key}.png`"
						mode="aspectFit"
					/>
					<text class="f1 ml-38 mr-30 fs-32 color-333 fw-700">{{ method.text }}</text>
					<radio
						:value="method.value.toString()"
						color="#f45455"
						:disabled="method.disabled"
						:checked="method.value === withdrawalMethod"
					/>
				</label>
			</radio-group>

			<button
				:style="{ width: `400rpx` }"
				class="mt-40 color-fff fs-32 bgc-f45455 br-40 lh-80"
				hover-class="tap-hover"
				@click="confirmWithdrawal"
				:disabled="!Number(balance)"
			>
				全部提现
			</button>
		</view>

		<view class="bgc-fff mt-80 pt-24">
			<view v-for="(log, index) in logs.list" :key="index" :style="{ margin: `28rpx 54rpx` }">
				<label class="jc-sb fs-30 fw-700">
					<text class="color-333">{{ log.type }}</text>
					<text :style="{ color: ['#09bd62', '#f45455'][Number(log.status)] }">
						{{ ["发放中", "已到账"][Number(log.status)] }}
					</text>
				</label>
				<label class="jc-sb fs-28 mt-18">
					<text class="color-ccc">{{ log.createtime }}</text>
					<text class="color-333">{{ Number(log.price).toFixed(2) }}元</text>
				</label>
			</view>
			<uni-load-more :status="loadStatus" />
		</view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { Pager } from "@/static/type";

	let requestFlag: boolean = false;
	@Component
	export default class RewardWithdrawal extends Vue {
		// component property
		logs: Pager<AnyObject> = { page: 1, list: [], size: 18 };
		loadStatus: string = "loading";

		methods: AnyObject = {
			withdrawal_balance: {
				text: "余额",
				value: 0,
			},
			wechat: {
				text: "微信钱包",
				value: 1,
				disabled: true,
			},
		};
		withdrawalMethod: number = 0;
		balance: number = 0;

		onLoad() {
			uni.startPullDownRefresh({});
		}
		onPullDownRefresh() {
			this.refreshLogs();
		}
		onReachBottom() {
			this.getListData();
		}

		refreshLogs() {
			this.logs.list = [];
			this.logs.page = 1;
			this.getListData();
		}

		getListData() {
			const { $request, logs } = this;

			if (requestFlag || !logs.page) return;
			(requestFlag = true), (this.loadStatus = "loading");

			$request
				.get("/shop/withdrawal", {
					page: logs.page,
					size: logs.size,
				})
				.then(({ data }) => {
					+data.all_money && (this.balance = +data.all_money);
					logs.list.push(...data.data);
					logs.page = data.current_page < data.last_page ? ++data.current_page : 0;
					this.loadStatus = logs.page ? "more" : "noMore";
					this.loadStatus = "noMore";
				})
				.finally(() => {
					requestFlag = false;
					logs.page > 1 || uni.stopPullDownRefresh();
				});
		}
		changeWithdrawalMethod({ detail }: AnyObject) {
			this.withdrawalMethod = +detail.value;
		}
		confirmWithdrawal() {
			this.$request
				.get("/shop/addWithdrawal", { type: this.withdrawalMethod })
				.then(({ msg: title }) => {
					uni.showToast({ title });
					this.refreshLogs();
				});
		}
	}
</script>

<style lang="scss" scoped>
	// scss

	::v-deep {
		radio {
			transform: scale(0.8);
		}
	}

	button[disabled] {
		background-color: #f45455;
		opacity: 0.6;
		color: #fff;
	}
</style>